<?php include PATH_TPL."/admin/tpl.header.phtml"?>
<div class="main-container inner">
    <div class="main-content">
        <div class="container-fluid">
            <div class="row bt">
                <div class="col-lg-12 bg">
                    <ol class="breadcrumb">
                        <li class="active">
                            <i class="fa  fa-fw fa-reorder"></i>添加课程
                        </li>
                    </ol>
                </div>
            </div>
            <div id="page-wrapper">
                <div class="container-fluid col-md-7 col-sx-12">
                    <form action="/admin_coursetopic/add" method="post" enctype="multipart/form-data">
                        <!--<div class="form-group ">
                            <label for="course_title">课程标题</label>
                            <input type="text" placeholder="输入课程标题" id="course_title" class="form-control" name="course_title">
                            <input type="hidden" id="course_id" class="form-control" name="course_id">
                        </div>-->
                        <input type="hidden" id="course_id" class="form-control" name="course_id" value="<?=$tCourse_id?>">
                        <div class="form-group ">
                            <span style="color:red;font-size:16px;">**请将题目的正确选项勾上(答案选项最多只能添加4个)</span>
                        </div>
                        <div class="form-group ">
                            <input type="radio" id="type1" value="1" name="type" checked>
                            <label class="reset" for="type1">单选题&nbsp;&nbsp;</label>
                            <input type="radio" id="type2" value="2" name="type">
                            <label class="reset" for="type2">多选题&nbsp;&nbsp;</label>
                            <button type="button" id="add_type" class="btn">添加考题</button>
                        </div>
                        <div id="option_add_detail" class="form-group hidden" ></div>
                        <button class="btn btn-primary demo_2" type="button" id="submit">添加</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="subviews">
            <div class="subviews-container"></div>
        </div>
    </div>
    <!-- end: PAGE -->
</div>
<!-- end: MAIN CONTAINER -->
<script type="text/javascript" src="/plugins/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script>

function dboption(obj){
    var ss = '<input id="edit_text" type="text" value="'+$(obj).html()+'">';
    $(obj).html(ss).children().focus();
    $('#edit_text').focusout(function(){
        $(obj).html($(this).val()+'&nbsp;&nbsp;&nbsp;&nbsp;');
        $('#'+$(obj).attr('for')).val($(this).val()+'&nbsp;&nbsp;&nbsp;&nbsp;');
        if($(this).val() == '' || $(this).val() == null){ 
            $('#'+$(obj).attr('for')).remove();
            $('.'+$(obj).attr('for')).remove();
            $(this).remove();
        }
    });
}
$(function(){
    $('.reset').click(function(){
        $('#add_type').click();
    });
});
$(function(){
    var x = 0;
    $('#add_type').click(function(){
        x = 0;
        $('#topic_option').remove();
        $('#option_add_detail').children().remove();
        var str = '<div id="topic_option"><div class="form-group "> <label for="topic">题目</label><input type="text" placeholder="题目" id="topic" class="form-control" name="topic"></div>';
        var str1 = '<div class="form-group "> <label for="option">答案选项</label><input type="text" placeholder="选项内容" id="option" class="form-control" name="option"><button type="button" id="option_add" class="btn btn-default">添加选项</button> </div></div>';
        $(this).after(str+str1);
        $('#option_add').bind('click',function(){
            var content =  $('#option').val();
            if(content == '' || content == null){return;}
            x = x + 1;
            if(x > 8){ return; }
            if(content){
                if($('#type1').is(':checked')){
                    $('#option_add_detail').removeClass('hidden');
                    var tmp = 'value' + x;
                    var str2 = '<input type="hidden" id="'+tmp+'" name="'+tmp+'" value="'+content+'"><input type="radio" class="'+tmp+'" name="radio" value="'+x+'"><label for="'+tmp+'" ondblclick="dboption(this)">'+content+'&nbsp;&nbsp;&nbsp;&nbsp;</label>';
                    $('#option_add_detail').append(str2);
                }
                if($('#type2').is(':checked')){
                    $('#option_add_detail').removeClass('hidden');
                    var tmp = 'value' + x;
                    var str2 = '<input type="hidden" id="'+tmp+'" name="'+tmp+'" value="'+content+'"><input type="checkbox" class="'+tmp+'" name="checked[]" value="'+x+'"><label for="'+tmp+'" ondblclick="dboption(this)">'+content+'&nbsp;&nbsp;&nbsp;&nbsp;</label>';
                    $('#option_add_detail').append(str2);
                }
            }
            $('#option').val('');
        });
    });
});
</script>
<script>
$(function(){
    var options={
        beforeSubmit : showRequest,    // 提交前的回调函数
        success : showResponse,    // 提交后的回调函数
        dataType : "json",    // html（默认）、xml、script、json接受服务器端返回的类型
        //timeout : 3000    // 限制请求的时间，当请求大于3秒后，跳出请求
    }
    function showRequest(formData, jqForm, options){
        return true;
    }
    function showResponse(responseText,statusText){
        cg_alert_add(responseText,'/admin_coursetopic/index?course_id=<?=$tCourse_id?>','/admin_coursetopic/add?course_id=<?=$tCourse_id?>');
    }
    $('#submit').click(function() {
        $('form').ajaxSubmit(options);
        return false;

    });
});

$("#course_title").autocomplete({
       source:"/admin_coursetopic/course",
       select:function(event,ui){
            $(this).value = ui.item.title;
            $("#course_id").val( ui.item.id );
            // 必须阻止默认行为，因为autocomplete默认会把ui.item.value设为输入框的value值
            event.preventDefault();     
        },
        focus:function(event,ui){
            $(this).val(ui.item.title);
            return false;
        },
}).data("ui-autocomplete")._renderItem = function (ul, item) {//.autocomplete('instance')._renderItem...
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.title+"</a>")
            .appendTo(ul);
};

</script>
<?php include PATH_TPL."/admin/tpl.footer.phtml"?>
